<template>
 <view class="background">
		<view class="personal">
			<image src="../../../static/images2/wd/tx.png" mode=""  class="img"></image> 
			<view class="right">
				<view class="username">{{username}}</view>
				<view class="mobile">{{mobile}}</view>
			</view>
		</view> 
		<view class="SuperFine public">
			<view class="card" @click="bankCard ">
					<image src="../../../static/images2/wd/icon-bank.png" mode=""  class="cardImg"></image>
					<view class="cardTitle">
						银行卡管理
					</view>
			</view>
			<view class="show"></view>
			<view class="card" @click="changePassword">
					<image src="../../../static/images2/wd/icon-mmgl.png" mode=""  class="modifyImg"></image>
					<view class="cardTitle">
						修改登录密码
					</view>
			</view>
			<view class="show"></view>
			<view class="card" @click="changeTransaction">
					<image src="../../../static/images2/wd/icon-rmb.png" mode=""  class="modifyImg"></image>
					<view class="cardTitle">
						修改交易密码
					</view>
			</view>
			<view class="show"></view>
			<view class="card" @click="helpCenter">
					<image src="../../../static/images2/wd/icon-bz.png" mode=""  class="modifyImg"></image>
					<view class="cardTitle">
						帮助中心
					</view>
			</view>
			<view class="show"></view>
			<view class="card" @click="protection">
				<image src="../../../static/images2/wd/icon-ss.png" mode=""  class="modifyImg"></image>
				<view class="cardTitle">
					诉讼保障
				</view>
			</view>
			<view class="show"></view>
			<!--
			<view class="card" @click="switchAccount">
				<image src="../../../static/images/switch.png" mode=""  class="modifyImg"></image>
				<view class="cardTitle">
					退出登录
				</view>
			</view>
			-->
			
			<view class="logout-btn" @click="switchAccount">
				退出登录
			</view>
			
</view>

<jpPwd ref="jpPwds" tite="身份验证" height='58' @inputPwd="inputPwd" :contents="title" :flag="flag"  @completed="completed"  ></jpPwd>
	 <u-toast ref="uToast" />
<ditorsBar></ditorsBar>
 </view>
</template>

<script>
	import jpPwd from '@/components/jp-pwd/jp-pwd.vue';
	import date from '@/utils/date.js'
	import {mapState,mapMutations,mapActions} from 'vuex'
 export default {
   data () {
     return {
       phone:'17311701400',
	   mobile:'',
	   username:'',
	   flag:false,
	   title:'请输入旧的交易密码',
     }
   },
   components: {
	jpPwd
   },
   methods: {
	   ...mapMutations({
	    changeOldPassword:'PERSONAL/CHANGE_OLD_PASSWORD',//旧密码
	    changeNewPassword:'PERSONAL/CHANGE_NEW_PASSWORD',//新密码
	   }),
	   ...mapActions({
	    transactionPassword:'PERSONAL/TRANSACTION_PASSWORD',//确认密码提交
	   }),
	   switchAccount(){
		   uni.showModal({
		       title: '提示',
		       content: '是否要切换账号?',
		       success: function (res) {
		           if (res.confirm) {
		            uni.redirectTo({
		             	url: '/pages/loanee/login/index'
		             }); 
					  uni.removeStorageSync('token');
					  uni.removeStorageSync('group_id');
		           } 
		       }
		   });
	   },
	   //银行卡管理
	   bankCard(){
		 uni.navigateTo({
		     url: '/pages/creditor/personal/management'
		 });   
	   },
	   //修改密码
	   changePassword(){
		uni.navigateTo({
		    url: '/pages/creditor/personal/steganogram'
		});   
	   },
	   //帮助中心
	   helpCenter(){
     uni.navigateTo({
		    url: '/pages/loanee/personal/helpCenter'
		});  
	   },
	   //诉讼保障
	   protection(){
  uni.navigateTo({
		    url: '/pages/loanee/personal/protection'
		});  
	   },
	   //修改交易密码
	   changeTransaction(){
		   this.$refs.jpPwds.toOpen()
		   this.flag=false
		 // uni.navigateTo({
		 //     url: '/pages/creditor/personal/tradersPassword'
		 // });  
	   },
	   //修改交易密码
	   completed(e){
	   		if(this.title=='请输入旧的交易密码'){
	   		  this.changeOldPassword(e)
	   		  this.title="请输入新的交易密码"
	   		this.$refs.jpPwds.backs()
	   		 }else if(this.title=='请输入新的交易密码'){
	   		   this.changeNewPassword(e)
	   		   this.title="请再次输入新的交易密码"
	   		   this.$refs.jpPwds.backs()
	   		 }else{
	   		      this.$refs.jpPwds.backs()
	   		       this.title="请输入旧的交易密码" 
	   		       if(this.transaction.new_pwd!=e){
	   				   this.flag=true
	   		        this.$refs.uToast.show({
	   						title: '两次密码不一致',
	   					})
	   		            return
	   		       }
	   		       this.transactionPassword(e).then(res=>{
	   				  if(res){
						uni.showToast({
						    title: '修改成功',
							icon:'success',
						    duration: 2000
						}); 
						  this.$refs.jpPwds.toCancel()  
					  }
	   			   })
	   		 }   
	   },
	   
	   inputPwd(){
	   		    this.flag=false  
	   }
   },
   mounted() {
      if( uni.getStorageSync('userinfo')){
		this.username= uni.getStorageSync('userinfo').username 
		this.phone= uni.getStorageSync('userinfo').mobile 
	 }
	   this.mobile=date.phoneNumFilter(this.phone)
   },
   watch: {

   },
   computed: {
 ...mapState({
       transaction:(state)=>state.PERSONAL.transaction
   })
   }
 }
</script>

<style scoped lang='scss'>
@import "@/common/personal.scss";
</style>
<style>
page{
    background: #FAFAFA;
}
</style>